<template>
  <v-app>
    <v-main>
      <v-menu
      transition="fab-transition"
    >
      <template v-slot:activator="{ props }">
        <v-btn
          color="primary"
          v-bind="props"
        >
          Dropdown
        </v-btn>
      </template>

      <v-list>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
        <v-menu open-on-hover location="end">
          <template v-slot:activator="{ props }">
            <v-list-item v-bind="props">
              <v-list-item-title>打开子菜单</v-list-item-title>
            </v-list-item>
          </template>
          <v-list>
            <v-list-item v-for="subItem in subItems" :key="subItem.title">
              <v-list-item-title>{{ subItem.title }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-list>
    </v-menu>
      <HelloWorld/>
    </v-main>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    items: [{ title: '菜单项1' }, { title: '菜单项2' }],
    subItems: [{ title: '子菜单项1' }, { title: '子菜单项2' }],
  }),
}
</script>
